// src/views/excel/Import.tsx
import { Button, Table, Switch, Image } from 'antd'
import { useState } from 'react'
import * as XLSX from 'xlsx'

type ImportProps = {}
interface DataType {
    proid: string
    proname: string
    img1: string
    originprice: number
    discount: number
    sales: number
    stock: number
    category: string
    brand: string
    issale: number
    isrecommend: number
    isseckill: number
}
export const Import = (props: ImportProps) => {
    const [proList, setProList] = useState([])
    // 导入数据
    const importExcel = () => {
        const file = (document.getElementById('fileRef') as HTMLInputElement).files![0]
        const reader = new FileReader()
        reader.readAsBinaryString(file!) // 转成 二进制格式
        reader.onload = function () {
            const workbook = XLSX.read(this.result, { type: 'binary' });
            const t = workbook.Sheets['list'] // 拿到表格数据
            console.log(t)
            const r: any = XLSX.utils.sheet_to_json(t) // 转换成json格式
            console.log(r)
            setProList(r)
            // 将r的数据上传至服务器
        }
    }

    return (
        <>
            <Button onClick={() => { // 触发文件选择器
                (document.getElementById('fileRef') as HTMLInputElement).click()
            }}>导入数据</Button>
            <input type="file" hidden id='fileRef' onChange={importExcel} />
            <Table dataSource={proList} rowKey="proid" scroll={{ y: document.body.offsetHeight - 330 }}>
                <Table.Column
                    title="序号"
                    render={(text, record, index) => { return <span>{index + 1}</span> }}
                ></Table.Column>
                <Table.Column
                    title="产品分类"
                    dataIndex="category"
                ></Table.Column>
                <Table.Column
                    title="产品品牌"
                    dataIndex="brand"
                ></Table.Column>
                <Table.Column
                    title="产品名称"
                    dataIndex="proname"
                ></Table.Column>
                <Table.Column
                    title="图片"
                    dataIndex="img1"
                    render={(text) => { return <Image src={text} height={80} /> }}
                ></Table.Column>
                <Table.Column
                    title="产品价格"
                    dataIndex="originprice"
                    sorter={(a: DataType, b: DataType) => a.originprice - b.originprice}
                ></Table.Column>
                <Table.Column
                    title="产品折扣"
                    dataIndex="discount"
                    sorter={(a: DataType, b: DataType) => a.discount - b.discount}
                ></Table.Column>
                <Table.Column
                    title="产品销量"
                    dataIndex="sales"
                    sorter={(a: DataType, b: DataType) => a.sales - b.sales}
                ></Table.Column>
                <Table.Column
                    title="产品库存"
                    dataIndex="stock"
                    sorter={(a: DataType, b: DataType) => a.stock - b.stock}
                ></Table.Column>
                <Table.Column
                    title="是否上架"
                    dataIndex="issale"
                    render={(text) => { return <Switch checked={text === 1} /> }}
                ></Table.Column>
                <Table.Column
                    title="是否推荐"
                    dataIndex="isrecommend"
                    render={(text) => { return <Switch checked={text === 1} /> }}
                ></Table.Column>
                <Table.Column
                    title="是否秒杀"
                    dataIndex="isseckill"
                    render={(text) => { return <Switch checked={text === 1} /> }}
                ></Table.Column>
            </Table>
        </>
    )
}